<!doctype html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>哔哩哔哩</title>
  <style>
    body {
      margin: 0;
      color: #333;
      font-size: 14px;
    }
    .video-box {
      /* height: 206px; */
    }
    .video {
      width: 100%;
      /* height: 100%; */
    }
    .head {
      display: flex;
      position: fixed;
      width: 100%;
      top: 0;
      background: #fff;
      z-index: 9;
    }
    .head:after {
      content: '';
      height: 1px;
      width: 100%;
      position: absolute;
      background: #ebecec;
      bottom: 0;
      z-index: -1;
    }
    .tabtitle {
      flex: 1;
      text-align: center;
    }
    .tabtxt {
      display: inline-block;
      height: 40px;
      line-height: 40px;
      border-bottom: 2px solid transparent;
      font-size: 15px;
    }
    .tab-active {
      border-color: #dd001b;
    }
    #app {
      padding-top: 42px;
    }
    .scroll {
      display: grid;
      grid-template-columns: repeat(6, auto);
      place-items: center;
      grid-auto-rows: 36px;
      border-bottom: 1px solid rgba(0, 0, 0, .1);
    }
    .cate-active {
      color: #dd001b;
    }
    .play-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .item {
      padding: 4px;
    }
    .pic-contain {
      position: relative;
    }
    .list-pic {
      width: 100%;
    }
    .hn {
      position: absolute;
      right: 1px;
      top: 0;
      color: #fff;
      font-size: 12px;
    }
    .nickname {
      position: absolute;
      color: #fff;
      bottom: 6px;
      left: 4px;
      font-size: 12px;
    }
    .roomName {
      font-size: 13px;
    }
    .danmu {
      padding: 4px 14px;
      height: 50vh;
      overflow-y: scroll;
      color: #666;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="head">
      <div class="tabtitle" @click="changeIndex('1')">
        <div class="tabtxt" :class="index==='1'&&'tab-active'">全部视频</div>
      </div>
      <div class="tabtitle" @click="changeIndex('2')">
        <div class="tabtxt" :class="index==='2'&&'tab-active'">正在播放</div>
      </div>
    </div>
    <div v-show="index==='1'">
      <div class="scroll">
        <div v-for="item in recList" :key="item.id" v-text="item.name" @click="getList(item.id)"
          :class="category===item.id&&'cate-active'"></div>
      </div>
      <div class="play-list">
        <div v-for="(item,index) in mixList" :key="index" class="item" @click="playVideo(item)">
          <div class="pic-contain">
            <img :src="item.pic.slice(19)" alt="" class="list-pic">
            <div v-text="item.play" class="hn"></div>
            <div v-text="item.author" class="nickname"></div>
          </div>
          <div v-text="item.title" class="roomName"></div>
        </div>
      </div>
    </div>
    <div class="video-box" v-show="index==='2'">
      <video @timeupdate="timeupdate" @error="catchErr" ref="video" autoplay preload="auto" webkit-playsinline="true"
        playsinline x5-playsinline="true" x-webkit-airplay="true" controls class="video" :src="videoSrc"></video>
      <div class="danmu" ref="show">
        <div v-for="(item,index) in danmu" :key="index" v-text="item[1]" v-show="item[0] < currentTime"></div>
      </div>
    </div>
  </div>
<script src="./js/aes.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      index: '1',
      recList: [
        { name: '首页', id: 0 },
        { name: '动画', id: 1 },
        { name: '番剧', id: 13 },
        { name: '国创', id: 167 },
        { name: '音乐', id: 3 },
        { name: '科技', id: 36 },
        { name: '舞蹈', id: 129 },
        { name: '数码', id: 188 },
        { name: '游戏', id: 4 },
        { name: '娱乐', id: 5 },
        { name: '鬼畜', id: 119 },
        { name: '电影', id: 23 },
        { name: '电视剧', id: 11 },
        { name: '纪录片', id: 177 },
        { name: '影视', id: 181 },
        { name: '时尚', id: 155 },
        { name: '生活', id: 160 },
        { name: '广告', id: 165 }
        // {name: '直播', id: -1},
      ],
      mixList: [],
      // videoSrc: './video/test.MOV',
      videoSrc: 'https://aldirect.hls.huya.com/backsrc/94525224-2460685313-10568562945082523648-2789274524-10057-A-0-1_1200.m3u8?wsSecret=4cc5791880c2e54fd5a3c4474adfeb64&wsTime=5dda4303',
      category: 0,
      socket: null,
      timer: null,
      danmu: [],
      page: 3,
      isLoaded: true,
      currentTime: 0
    },
    methods: {
      timeupdate(e) {
        this.currentTime = e.target.currentTime
        const show = this.$refs.show
        this.$nextTick(() => {
          show.scrollTop = show.scrollHeight
        })
      },
      getDanmu(id) {
        this.danmu = []
        // </source>
        axios.get('/biliapi/x/v1/dm/list.so?oid=' + id + '&comp=0').then(res => {
          var data = res.data
          var index = data.indexOf('</source>') + 9
          data = data.slice(214, -8)
          data = data.split('</d>')
          data = data.map(v => { var index1 = v.indexOf(','), index2 = v.lastIndexOf('>'); return [v.slice(6, index1), v.slice(index2 + 1)] })
          data.sort((a, b) => a[0] - b[0])
          this.danmu = data
        })
      },
      catchErr(e) {
        // this.videoSrc += '&index=1'
      },
      playVideo(item) {
        this.$refs.video.pause()
        this.index = '2'
        this.getDanmu(item.cid)
        axios.get('/biliapi/x/player/playurl?cid=' + item.cid + '&avid=' + item.aid + '&otype=json&platform=html5&type=mp4&html5=1').then(res => {
          if (res.data.code === -404) {
            axios.get('/biliapi/pgc/player/web/playurl/html5?ep_id=' + item.aid)
            return
          }
          this.videoSrc = '/bvideo'+res.data.data.durl[0].url.slice(6)
          // this.videoSrc = res.data.data.durl[0].url
        })
      },
      getList(name) {
        this.category = name
        if (!name) {
          this.getMix()
        } else {
          // pn=2 页数
          axios.get('/biliapi/x/web-interface/dynamic/region?rid=' + name + '&ps=50').then(res => {
            this.mixList = res.data.data.archives
          })
        }
      },
      changeIndex(val) {
        this.index = val
      },
      init() {
        this.getMix()
      },
      getMix() {
        axios.get('/biliapi/x/web-interface/ranking?rid=0&day=3&jsonp=jsonp').then(res => {
          var list = res.data.data.list
          this.mixList = list.slice(0, 50)
        })
      }
    },
    created() {
      this.init()
    },
    mounted() {
      const video = this.$refs.video
      document.addEventListener("WeixinJSBridgeReady", () => {
        WeixinJSBridge.call('hideToolbar');
        video.play()
      }, false);
      // window.addEventListener('touchstart', ()=>{video.play()})
    }
  })
</script>
</body>
</html>